<template>
  <el-dialog :visible.sync="currentShowFlag" append-to-body :close-on-click-modal="false" :close-on-press-escape="false" @open="handleDialogOpen" @closed="handleDialogClosed">
    <div slot="title" class="detail-dialog__header">{{$t('system_menu.detailDialog')}}</div>
    <div>
      <simple-form ref="form" v-model="formModel" :form-field="formField" label-width="90px" :grid="{span: 24}" :view-flag="viewFlag">
        <!-- 权限配置 -->
        <template slot="actionids">
          <el-checkbox-group v-model="formModel.actionids" @change="handleCheckedPermissionChange">
            <el-checkbox v-for="opt in actionsData" :label="opt.actionid" :key="opt.actionid">{{opt.actionname}}</el-checkbox>
          </el-checkbox-group>
        </template>
      </simple-form>
    </div>
    <div slot="footer">
      <el-button @click="handleDialogClose">{{viewFlag ? $t('operation.close') : $t('operation.cancel')}}</el-button>
      <el-button type="primary" @click="handleDataSubmit" v-if="!viewFlag">{{$t('operation.submit')}}</el-button>
    </div>
  </el-dialog>
</template>
<script>
const BASEURL = {
  get: '/Web/SysAdmin/ajax.html?sys_method=GetMenuDetails&sys_objName=Sys_Menu',
  update: '/Web/SysAdmin/ajax.html?sys_method=Update&sys_objName=Sys_Menu',
  save: '/Web/SysAdmin/ajax.html?sys_method=Add&sys_objName=Sys_Menu',
  getActions: '/Web/SysAdmin/ajax.html?sys_method=GetActions&sys_objName=Sys_Action'
}
export default {
  name: 'menu-management_detail',
  data () {
    return {
      formModel: {
        actionids: []
      },
      actionsData: []
    }
  },
  inject: ['handleDataSearch'],
  computed: {
    currentShowFlag: {
      get () { return this.showFlag },
      set (val) { this.$emit('update:showFlag', val) }
    },

    formField () {
      return [
        {
          prop: 'menuname',
          label: this.$t('system_menu.title'),
          type: 'Input',
          rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
        },
        {
          prop: 'menuurl',
          label: this.$t('system_menu.name'),
          type: 'Input',
          rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
        },
        {
          prop: 'sortorder',
          label: this.$t('system_menu.sort'),
          type: 'NumberInput',
          component: {
            decimal: 0,
            min: 0
          }
        },
        {
          prop: 'isshow',
          label: this.$t('system_actionList.isenabled'),
          type: 'Select',
          component: { optionList: this.$getDictList('是否') },
          rules: { trigger: 'change', message: this.$t('validate.notSelect'), required: true }
        },
        {
          prop: 'actionids',
          label: this.$t('system_menu.permission'),
          type: 'NumberInput',
          slotName: 'actionids'
        }
      ]
    }
  },

  props: {
    showFlag: { type: Boolean, default: false },
    viewFlag: { type: Boolean },
    detailData: { type: Object }
  },

  methods: {
    handleDialogClose () {
      this.currentShowFlag = false
    },

    handleCheckedPermissionChange (checkedList) {
      this.$set(this.formModel, 'actionids', checkedList)
    },

    handleDataSubmit () {
      this.$refs.form.$refs.simpleForm.validate(status => {
        if (status) {
          let loadingFlag = this.$loading({ target: this.$el.querySelector('.el-dialog') })
          let submitModel = this.$_.cloneDeep(this.formModel)
          submitModel.actionids = this.formModel.actionids.join(',')
          submitModel.sortorder = this.formModel.sortorder ? this.formModel.sortorder : 0
          if (this.detailData.menuid) { // 编辑
            this.$axios
              .post(BASEURL.update, submitModel)
              .then(resp => {
                this.currentShowFlag = false
                this.handleDataSearch()
              })
              .finally(() => {
                loadingFlag.close()
              })
          } else { // 新增
            submitModel.menuid = null
            submitModel.parentmenuid = this.detailData.parent.menuid
            submitModel.menulevel = this.detailData.parent.menulevel + 1
            submitModel.sys_mid = this.detailData.sysmid
            this.$axios
              .post(BASEURL.save, submitModel)
              .then(resp => {
                this.currentShowFlag = false
                this.handleDataSearch()
              })
              .finally(() => {
                loadingFlag.close()
              })
          }
        }
      })
    },

    getActions () {
      this.$axios
        .post(BASEURL.getActions, {})
        .then(resp => {
          this.actionsData = resp
          if (this.detailData.menuid) {
            this.getDetail(this.detailData.menuid)
          }
        })
    },

    getDetail (menuid) {
      this.$axios
        .post(BASEURL.get, { id: menuid, 'sys_mid': this.detailData.sysmid })
        .then(resp => {
          this.formModel = resp
          this.$set(this.formModel, 'isshow', resp.isshow.toString())
          this.$set(this.formModel, 'actionids', resp.actionids.split(','))
        })
    },

    handleDialogOpen () {
      this.getActions()
    },

    handleDialogClosed () {
      this.formModel = { actionids: [] }
      this.$refs.form.resetFields()
    }
  }
}
</script>
